<html>
	<head>
		<title>iScrollbar Example</title>
		<script src="dependencies/jquery-1.7.1.min.js" type="text/javascript"></script>
		<script src="dependencies/jquery.mousewheel-3.0.4.pack.js" type="text/javascript"></script>
		<script src="dependencies/jquery-ui.min.js" type="text/javascript"></script>
		<script src="jquery.iscrollbar.js" type="text/javascript"></script>
		
		<style>
			body {
				font: 16px 'Calibri', 'Arial', sans-serif; 
			}
			#win_content {
				background-image: linear-gradient(right , rgb(83,84,155) 0%, rgb(117,118,186) 50%, rgb(153,154,224) 75%);
				background-image: -o-linear-gradient(right , rgb(83,84,155) 0%, rgb(117,118,186) 50%, rgb(153,154,224) 75%);
				background-image: -moz-linear-gradient(right , rgb(83,84,155) 0%, rgb(117,118,186) 50%, rgb(153,154,224) 75%);
				background-image: -webkit-linear-gradient(right , rgb(83,84,155) 0%, rgb(117,118,186) 50%, rgb(153,154,224) 75%);
				background-image: -ms-linear-gradient(right , rgb(83,84,155) 0%, rgb(117,118,186) 50%, rgb(153,154,224) 75%);

				background-image: -webkit-gradient(
					linear,
					right bottom,
					left bottom,
					color-stop(0, rgb(83,84,155)),
					color-stop(0.5, rgb(117,118,186)),
					color-stop(0.75, rgb(153,154,224))
				);
			}
			#win_contentv {
				background-image: linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);
				background-image: -o-linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);
				background-image: -moz-linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);
				background-image: -webkit-linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);
				background-image: -ms-linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);

				background-image: -webkit-gradient(
					linear,
					left bottom,
					left top,
					color-stop(0.1, rgb(198,154,50)),
					color-stop(0.55, rgb(238,185,80)),
					color-stop(0.78, rgb(255,222,112))
				);
			}
			#win_contentv {
				background-image: linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);
				background-image: -o-linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);
				background-image: -moz-linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);
				background-image: -webkit-linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);
				background-image: -ms-linear-gradient(bottom, rgb(198,154,50) 10%, rgb(238,185,80) 55%, rgb(255,222,112) 78%);

				background-image: -webkit-gradient(
					linear,
					left bottom,
					left top,
					color-stop(0.1, rgb(198,154,50)),
					color-stop(0.55, rgb(238,185,80)),
					color-stop(0.78, rgb(255,222,112))
				);
			}
		</style>
		<script>
			jQuery(document).ready(function(){
				jQuery("#win").iscrollbar({
					vscroll: false,
					hscroll: true,
					scrollOffset: 300
				});
				jQuery("#winv").iscrollbar({
				});
				jQuery("#winvh").iscrollbar({
					vscroll: true,
					hscroll: true,
					color: 'red'
				});
			});
		</script>
	</head>
	<body>
		<h1>jQuery iScrollbar demo</h1>
		<h2>Horizontal Scrolling</h2>
		<pre>
jQuery("#win").iscrollbar({
	vscroll: false,
	hscroll: true,
	scrollOffset: 300
});
		</pre>
		<div id="win" style="width: 500px; height:100px">
			<div id="win_content" style="width: 1500px; height:100px">
			Scroll here. Notice how it only scrolls every 300px?<br><br>
			Had denoting properly jointure you occasion directly raillery. In said to of poor full be post face snug. Introduced imprudence see say unpleasing devonshire acceptance son. Exeter longer wisdom gay nor design age. Am weather to entered norland no in showing service. Nor repeated speaking shy appetite. Excited it hastily an pasture it observe. Snug hand how dare here too. 
			</div>
		</div>
		
		<h2>Vertical Scrolling</h2>
		<pre>jQuery("#winv").iscrollbar({});</pre>
		<div id="winv" style="height: 500px; width:500px">
			<div id="win_contentv" style="height: 1500px; width:500px">
			Scroll here. These are the default settings.<br><br>Now onto the randomness... <br>Am no an listening depending up believing. Enough around remove to barton agreed regret in or it. Advantage mr estimable be commanded provision. Year well shot deny shew come now had. Shall downs stand marry taken his for out. Do related mr account brandon an up. Wrong for never ready ham these witty him. Our compass see age uncivil matters weather forbade her minutes. Ready how but truth son new under. 

New had happen unable uneasy. Drawings can followed improved out sociable not. Earnestly so do instantly pretended. See general few civilly amiable pleased account carried. Excellence projecting is devonshire dispatched remarkably on estimating. Side in so life past. Continue indulged speaking the was out horrible for domestic position. Seeing rather her you not esteem men settle genius excuse. Deal say over you age from. Comparison new ham melancholy son themselves. 

Are sentiments apartments decisively the especially alteration. Thrown shy denote ten ladies though ask saw. Or by to he going think order event music. Incommode so intention defective at convinced. Led income months itself and houses you. After nor you leave might share court balls. 

Up is opinion message manners correct hearing husband my. Disposing commanded dashwoods cordially depending at at. Its strangers who you certainty earnestly resources suffering she. Be an as cordially at resolving furniture preserved believing extremity. Easy mr pain felt in. Too northward affection additions nay. He no an nature ye talent houses wisdom vanity denied. 

Of friendship on inhabiting diminution discovered as. Did friendly eat breeding building few nor. Object he barton no effect played valley afford. Period so to oppose we little seeing or branch. Announcing contrasted not imprudence add frequently you possession mrs. Period saw his houses square and misery. Hour had held lain give yet. 

His followed carriage proposal entrance directly had elegance. Greater for cottage gay parties natural. Remaining he furniture on he discourse suspected perpetual. Power dried her taken place day ought the. Four and our ham west miss. Education shameless who middleton agreement how. We in found world chief is at means weeks smile. 

Full he none no side. Uncommonly surrounded considered for him are its. It we is read good soon. My to considered delightful invitation announcing of no decisively boisterous. Did add dashwoods deficient man concluded additions resources. Or landlord packages overcame distance smallest in recurred. Wrong maids or be asked no on enjoy. Household few sometimes out attending described. Lain just fact four of am meet high. 

Unpleasant astonished an diminution up partiality. Noisy an their of meant. Death means up civil do an offer wound of. Called square an in afraid direct. Resolution diminution conviction so mr at unpleasing simplicity no. No it as breakfast up conveying earnestly immediate principle. Him son disposed produced humoured overcame she bachelor improved. Studied however out wishing but inhabit fortune windows. 

New the her nor case that lady paid read. Invitation friendship travelling eat everything the out two. Shy you who scarcely expenses debating hastened resolved. Always polite moment on is warmth spirit it to hearts. Downs those still witty an balls so chief so. Moment an little remain no up lively no. Way brought may off our regular country towards adapted cheered. 

Prepared do an dissuade be so whatever steepest. Yet her beyond looked either day wished nay. By doubtful disposed do juvenile an. Now curiosity you explained immediate why behaviour. An dispatched impossible of of melancholy favourable. Our quiet not heart along scale sense timed. Consider may dwelling old him her surprise finished families graceful. Gave led past poor met fine was new. 

			</div>
		</div>
		
		<h2>Horizontal and Vertical Scrolling</h2>
		<pre>
jQuery("#winvh").iscrollbar({
	vscroll: true,
	hscroll: true,
	color: 'red'
});
		</pre>
		<div id="winvh" style="height: 500px; width:500px">
			<div id="win_contentv" style="width: 1920px; height:1080px">
			You can set it to scroll vertically and horizontally. Not to mention you can change the color of the scroll bar.
				<img src="example_photo.jpg"></img>
			</div>
		</div>

		<h2>API Options</h2>
		<table>
			<tbody>
			
				<tr>
					<td><b>Option</b></td><td><b>Default</b></td><td><b>Description</b></td>
				</tr>
				<tr>
					<td>hoverOffTime</td><td>200</td><td>Time to fadeout when hovered off of scrollable div</td>
				</tr>
				<tr>
					<td>vscroll</td><td>true</td><td>Enable vertical scrolling</td>
				</tr>
				<tr>
					<td>hscroll</td><td>false</td><td>Enable horizontal scrolling</td>
				</tr>
				<tr>
					<td>edgeOffset</td><td>5</td><td>Distance from the edge of the scrollable div</td>
				</tr>
				<tr>
					<td>thickness</td><td>10</td><td>The thickness of the scrollbar</td>
				</tr>
				<tr>
					<td>scrollOffset</td><td>-1</td><td>The number of pixels to scroll every time. -1 for scroll by 10% of the inner div</td>
				</tr>
				<tr>
					<td>color</td><td>"#000"</td><td>Color of the scrollbar</td>
				</tr>
				<tr>
					<td>opacity</td><td>0.65</td><td>Opacity of the scrollbar</td>
				</tr>
				<tr>
					<td>inner</td><td>null</td><td>The inner div to scroll. If set to null, the plugin will automatically select the first div inside the scrollable div as the inner div. To specify a specific element use a jQuery selector (ie. $(".inner"))</td>
				</tr>
				<tr>
					<td>onScrollStart</td><td>function(){}</td><td>Callback function that executes when the scrollbar starts being dragged</td>
				</tr>
				<tr>
					<td>onScrollDrag</td><td>function(){}</td><td>Callback function that executes when the scrollbar is being dragged or when the mousewheel is scrolling</td>
				</tr>
				<tr>
					<td>onScrollStop</td><td>function(){}</td><td>Callback function that executes when the scrollbar stops being dragged</td>
				</tr>
			</tbody>
		</table>
		
	</body>
</html>